<template>
<div class="AAA" style="margin-top: 45px">
  <!--  搜索框-->
  <div style="width: 60%;margin:0 auto;float: left;">
  <a-input style="width:90%;margin-left: 85px;text-align: center;left:50px" placeholder="搜索话题和内容" v-model="search.articleDescription">
    <template #append>
      <a-button style="width: 100px;height:45px;color: #ffffff;background: linear-gradient(90deg, rgb(108, 66, 149), rgb(74, 66, 149));" @click="searchArticle()" href="/hand"><el-icon><Search /></el-icon></a-button>
    </template>
  </a-input>
  <el-card style="width: 100%;margin-left: 50px;border-radius: 20px;margin-bottom: 60px;margin-top: 20px">
  <div style=" position:relative;left: 650px;"><el-button type="info" size="large" @click="changeDialogVisible" round>发表文章</el-button></div>

<!--   主要内容-->
    <el-scrollbar height="900px">
    <div v-for="item in articleArr" style="width: 100%">
  <a-list
      :bordered="false"
      :pagination-props="paginationProps"

  >

      <a-list-item action-layout="vertical" >
        <div style="display: flex">
          <div><a-avatar v-if="item.userImg!=null"><img :src="BASE_URL+item.userImg"></a-avatar>
            <el-avatar v-else
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </div>
          <div style="position: relative;left: 10px;top: -5px"><h2>{{item.nickname}}</h2></div>
          <div style="position: relative;top: 25px;left: -30px;color: #3f3f3f"><span>{{item.createTime}}</span></div>
        </div>
        <a-link href="/hand" @click="submitData(item.forumArticleId);clickAdd(item.forumArticleId)" style="color: black;">
          <div>
            <h3 >{{item.articleDescription}}</h3>
            <div style="margin-top: 5px;margin-bottom: 10px;overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5; //多行在这里修改数字即可
    overflow:hidden;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;"><span>{{item.articleContent}}</span></div>
            <div style="margin-bottom: 20px;"><img alt="image" width="200px" height="200px"  v-if="item.imgUrl!=null"
                      v-for="url in item.imgUrl.split(',')"
                      :src="BASE_URL+url"
                      style="margin-right: 10px;"
            ></div>
          </div>
        </a-link>
<!--        按钮点赞等-->
        <template #actions>
          <span key="heart" @click="onLikeChange(item.forumArticleId,item.articleLike,item.isLike);clickAdd(item.forumArticleId)">
            <span v-if="item.isLike">
              <IconHeartFill :style="{ color: '#f53f3f' }" />
            </span>
            <span v-else>
              <IconHeart />
            </span>
              {{ item.articleLike }}
          </span>
          <span key="star" @click="onStarChange(item.forumArticleId,item.articleCollect,item.isCollect);clickAdd(item.forumArticleId)">
            <span v-if="item.isCollect">
              <IconStarFill :style="{ color: '#ffb400' }" />
            </span>
            <span v-else>
              <IconStar />
            </span>
            {{ item.articleCollect }}
          </span>
          <span @click="changeComments();selectComment(item.forumArticleId);loadComment(item.forumArticleId);" ><icon-message />评论</span>
          <span v-if="user!=null && item.userId === user.userId" @click="deleteArticle(item.forumArticleId)"><icon-delete /></span>
        </template>
      </a-list-item>


  </a-list>
    <!--评论 -->
    <a-comment
        style="position: relative;width: 500px;top: -60px;left: 30px"
        v-show="commentIndex === item.forumArticleId && commentsVisible"
    >
      <!-- 评论框-->
      <div class="editBox">
        <div style="width: 85%;margin-top: 40px">
          <a-input placeholder="发表你的评论" v-model="commentsList.commentContent"></a-input>
        </div>
        <div><a-button style="width: 40px;color: #ffffff;left: 450px;top: -32px" @click="insertComment(item.forumArticleId)">发送</a-button></div>
      </div>
    </a-comment>

    <a-comment
        style="position: relative;width: 500px;top: -70px;left: 30px"
        v-show="commentIndex === item.forumArticleId && commentsVisible"
        v-for="(item1,index1) in commentsList"
        :key="index1"
    >

      <!--一级评论 -->
      <div style="margin-top: -20px;margin-bottom: -20px" v-if="item1.parentCommentId===null">
        <div style="display: flex">
          <a-avatar v-if="item1.userImg!=null"><img :src="BASE_URL+item1.userImg"></a-avatar>
          <el-avatar v-else
                     src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <div style="position:relative;top:5px;left: 20px;bottom: -30px;font-size: 16px">
            <div>
              <span  style="font-weight: bold">{{item1.nickname}}:</span>
              <span>{{item1.commentContent}}</span>
            </div>
            <div style="position: relative;color: #3f3f3f;font-size: 11px;"><span>{{ item1.createTime }}</span></div>
          </div>
        </div>
      </div>
      <a-comment>
        <template #actions>
          <span @click="secondComment(item1.commentId,null,item1.forumArticleId)"><icon-message /></span>
          <span @click="loadComment2(item1.forumArticleId,item1.commentId);selectComment2(item1.commentId)"><icon-more /></span>
          <span v-if="user!=null && item1.userId === user.userId" @click="deleteComment(item1.commentId);loadComment(item1.forumArticleId)"><icon-delete /></span>
        </template>
      </a-comment>
      <!-- 二级评论-->
      <a-comment
          v-show="commentIndex2 == item1.commentId"
          v-for="(item2,index2) in commentList2"
          :key="index2"
          style="position: relative;left: 40px;top: -10px;margin-bottom: -50px"
      >
        <div v-if="item2.parentCommentId === item1.commentId" style="position: relative">
          <div style="display: flex;position: relative;top: -20px">
            <a-avatar v-if="item2.userImg!=null"><img :src="BASE_URL+item2.userImg"></a-avatar>
            <el-avatar v-else
                       src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
            <div style="position:relative;top: 5px;left: 20px;margin-bottom: -30px;font-size: 16px">
              <span style="font-weight: bold">{{item2.nickname}}</span>
              <span style="position: relative;left: 5px;" v-if="item2.commentName!==null">回复@{{item2.commentName }}:{{item2.commentContent}}</span>
              <span style="position: relative;left: 5px;" v-else>:{{item2.commentContent}}</span>
              <br/>
              <span style="position: relative;color: #3f3f3f;font-size: 11px;left:5px;top:-5px">{{ item2.createTime }}</span>
            </div>
          </div>
        </div>
        <a-comment style="position: relative;top: -40px">
          <template #actions >
            <span @click="secondComment(item1.commentId,item2.nickname,item2.forumArticleId)"><icon-message /></span>
            <span v-if="user!=null && item2.userId === user.userId" @click="deleteComment(item2.commentId);loadComment2(item1.forumArticleId,item1.commentId)"><icon-delete /></span>
          </template>
        </a-comment>
      </a-comment>
      <el-divider />
    </a-comment>
  </div>
    </el-scrollbar>
<!--    主要内容-->
  </el-card>
  </div>
<div style="width: 40%;float: right">
<!--热榜-->
  <div style="width: 100%;display: flex">
  <el-aside width="80%" style=" background-color: white;border-radius: 20px;margin-left: 70px" >
    <a-card >
      <a-list>
        <template #header>
          <h3 style="color: #8c0a14">{{title}}<img src="../../assets/img/forum/fire.svg" style="width: 16px;margin-top: 5px"></h3>
        </template>
          <a-list-item v-for="item1 in listArr.slice(0,3)"><a-link href="/hand" @click="submitData(item1.forumArticleId)">{{item1.articleDescription }}</a-link></a-list-item>
      </a-list>
    </a-card>
  </el-aside>
    </div>
  <!--以下是广告-->
  <div style="width: 100%;">
  <img src="../../assets/img/job/1.png" style="width: 80%;height: 240px;background-color:white;border-radius: 20px;margin-top:10px;margin-left: 70px">
  <img src="../../assets/img/job/2.png" style="width: 80%;height: 240px;background-color:white;border-radius: 20px;margin-top:10px;margin-left: 70px">
  </div>
</div>
  </div>


<!-- 发帖弹窗 -->
  <el-dialog v-model="dialogVisible" style="width: 500px;">
      <el-form label-position="top">
        <el-form-item label="文章描述">
          <el-input placeholder="请输入描述" v-model="dataSource.articleDescription"></el-input>
        </el-form-item>
        <el-form-item label="文章内容">
          <el-input placeholder="输入你的内容" v-model="dataSource.articleContent"></el-input>
        </el-form-item>
        <el-form-item label="上传图片">
          <el-upload
              v-model:file-list="fileList"
              action="http://localhost:8080/v1/file/upload"
              list-type="picture-card"
              name="file"
              limit="9"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>

          <el-dialog v-model="pictureDialog">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button type="info" style="position: relative;left: 10px" @click="submitArticle" round>发送</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
<!--  二级回复弹窗-->
  <el-dialog v-model="dialogVisible2" style="width: 500px;" >
    <div style="position: relative;bottom: 5px"><span>回复:{{commentName}}</span></div>
    <el-input placeholder="输入你的回复" v-model="commentsList.commentContent"></el-input>
    <el-button type="primary" style="position: relative;top: 10px;left: 410px" @click="insertComment(articleId,comment2Index)">发送</el-button>
  </el-dialog>
</template>

<script>
import {reactive, ref} from 'vue'
import {
  IconHeart,
  IconMessage,
  IconStar,
  IconStarFill,
  IconHeartFill,
  IconPlus,
  IconReply,
  IconShareInternal,
  IconMore,
  IconDelete,
} from '@arco-design/web-vue/es/icon';


const reply = ref(false);
const changeReply = ()=>{
  reply.value = !reply.value;
}
export default {
  components: {
    IconHeart,
    IconMessage,
    IconStar,
    IconStarFill,
    IconHeartFill,
    IconPlus,
    IconReply,
    IconShareInternal,
    IconMore,
    IconDelete,
  },
  setup() {
    return {
      reply,
      changeReply
    }
  },
}

</script>



<script setup>
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
import {onMounted, ref} from "vue";
import { Plus } from '@element-plus/icons-vue'

const user2 = ref(getUser());
const title = ref('热榜')
const listArr = ref([
])

//后端查出热榜按点赞数排序
const loadHot = () =>{
  axios.get(BASE_URL + '/v1/forum/hot')
      .then((response)=>{
        if (response.data.code==2000){
          listArr.value = response.data.data;
          console.log(listArr)
        }
      })
}
onMounted(()=>{
  loadHot();
})

const submitData = (id)=>{
  localStorage.setItem('id',id);
}
const user = ref(getUser());



console.log(user.value)
//控制新增弹窗
let dialogVisible = ref(false)
//控制二级评论弹窗
let dialogVisible2 = ref(false)

//图片上传开始
const fileList = ref([])
const dialogImageUrl = ref('')
const pictureDialog = ref(false)
// 删除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL+'/v1/file/remove?imgUrl='+imgUrl)
      .then((response)=>{
        if (response.data.code==2002){
          ElMessage.success('删除成功!');
        }
      })
}
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  pictureDialog.value = true
}
//图片上传结束
const changeDialogVisible = ()=>{
  if(user2.value == null){
    ElMessage.warning("请先注册登录！");
  }else{
    dialogVisible.value = true;
  }
}
const dataSource = ref( {
  userId:'',
  avatar:'',
  articleDescription:'',
  articleContent:'',
});
// 定义数组保存文章
const articleArr = ref([
]);

// 定义方法加载文章
const loadArticle = ()=>{

  if (user.value!=null){
    let id = user.value.userId
    axios.get(BASE_URL+'/v1/forum/select/' + id).then((response)=>{
      if (response.data.code==2000){
        articleArr.value = response.data.data;
        loadUserStatus()
        for (let i = 0;i < articleArr.value.length;i++){
          insertStatus(articleArr.value[i].forumArticleId);
        }
        console.log(articleArr.value)
      }
    })
  }
  else {
    axios.get(BASE_URL+'/v1/forum/selectNo')
        .then((response)=>{
          if (response.data.code==2000){
            articleArr.value = response.data.data;
            loadUserStatus()
            console.log(articleArr.value)
          }
        })
  }

}
const status = ref();
//加载用户状态

const loadUserStatus = ()=>{
  if (user.value==null){
    status.value = "正常";
  }
  else {
    axios.get(BASE_URL+'/v1/forum/selectStatus/'+user.value.userId).then((response)=>{
      if (response.data.code == 2000){
        status.value = response.data.data;
        console.log(status.value)
      }
    })
  }
}

onMounted(()=>{
  loadArticle();
})

const submitArticle = ()=>{
  if (status.value=="禁言"){
    ElMessage.error('您已被禁言!');
  } else if (fileList.value.length>0){
    let imgUrls = [];
    for (let file of fileList.value) {//遍历响应式数组
      //依次遍历得到每个文件的响应路径
      let imgUrl = file.response.data;
      //每得到一个路径,就存入imgUrls数组中
      imgUrls.push(imgUrl);
    }
    dataSource.value.imgUrl = imgUrls.toString();
    dataSource.value.userId = user.value.userId
    let data = qs.stringify(dataSource.value);
    axios.post(BASE_URL+'/v1/forum/insert',data).then((response)=>{
      if (response.data.code == 2000){
        ElMessage.success('发表成功!');
        dialogVisible.value = false;
        loadArticle();
        loadHot()
        dataSource.value = {}
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

// 控制评论菜单
const commentsVisible = ref(false)

const changeComments = ()=>{
  commentsVisible.value = true;
}

// 控制评论显示
const commentIndex = ref(0)
const commentIndex2 = ref(0)

const selectComment = (id)=>{
  commentIndex.value = id;
  commentsVisible.value = true;
}
const selectComment2 = (id)=>{
  commentIndex2.value = id;
  commentsVisible.value = true;
}
//保存二级评论的内容
const commentContent2 = ref()
// 定义数组保存评论
const commentsList = ref({
  userId:'',
  nickname:'',
  commentId:'',
  commentContent:'',
  forumArticleId:'',
  parentCommentId:'',
})
// 定义方法发表评论
const insertComment = (forumArticleId,parentCommentId)=>{
  if (user.value==null){
    ElMessage.error('请先登录!');
  } else if (status.value=="禁言"){
    ElMessage.error('您已被禁言!');
  } else {
    commentsList.value.userId = user.value.userId
    commentsList.value.nickname = user.value.nickname
    commentsList.value.forumArticleId = forumArticleId;
    commentsList.value.parentCommentId = parentCommentId;
    if (commentName.value != null){
      commentsList.value.commentName = commentName.value
    }
    let data = qs.stringify(commentsList.value);
    axios.post(BASE_URL+'/v1/forum/insertComment',data).then((response)=>{
      if (response.data.code==2000){
        ElMessage.success('评论发表成功!');
        commentsList.value.commentContent = [];
        loadComment(forumArticleId);
        dialogVisible2.value=false;
      }else {
        ElMessage.error('发表评论失败!');
      }
    })
  }

}

const loadComment = (id)=>{
  axios.get(BASE_URL+'/v1/forum/selectComment/'+id).then((response)=>{
    if (response.data.code==2000){
      commentsList.value = response.data.data;
      console.log(commentsList.value)
    }
  })
}
// 控制二级评论回复对象
const commentName = ref()
// 控制二级评论文章id对象
const articleId = ref()
// 保存父评论id
const comment2Index = ref(0)
// 定义输出格式
// 控制二级评论弹窗
const secondComment = (commentId,nickname,forumArticleId)=>{
  articleId.value = forumArticleId;
  commentName.value = nickname;
  comment2Index.value = commentId;
  dialogVisible2.value = true;
}
// 保存二级评论
const commentList2 = ref([])
const loadComment2 = (forumArticleId,parentCommentId)=>{
  axios.get(BASE_URL+'/v1/forum/selectSecondComment/'+forumArticleId +'/'+parentCommentId).then((response)=>{
    if (response.data.code==2000){
      commentList2.value = response.data.data;
      console.log(commentList2.value)
    }
  })
}

//删除评论
const deleteComment = (id)=>{
  if (confirm('确定要删除吗?')) {
    axios.post(BASE_URL + '/v1/forum/deleteComment/'+id).then((response) => {
      if (response.data.code == 2000) {
        ElMessage.success('删除成功!');
      }
    })
  }
}

//控制点赞
const like = ref(false)
//控制收藏
const star = ref(false)
const onLikeChange = (id,cont,isLike)=>{
  if (user.value==null){
    ElMessage.error('请先登录!')
  } else {
    like.value = isLike==1?false:true;
    if (like.value==true){
      cont += 1
    }else {
      cont -= 1
    }
    let userId = user.value.userId
    axios.post(BASE_URL+'/v1/forum/arLike/'+id+'/' + userId + '/' + cont).then((response)=>{
      if (response.data.code==2000){
        loadArticle();
      }
    })
  }

}
const onStarChange = (id,cont,isCollect)=>{
  if (user.value == null){
    ElMessage.error('请先登录!')
  } else {
    star.value = isCollect==1?false:true;
    if (star.value==true){
      cont += 1
    }else {
      cont -= 1
    }
    let userId = user.value.userId
    axios.post(BASE_URL+'/v1/forum/arCollect/'+id+'/' + userId + '/' + cont).then((response)=>{
      if (response.data.code==2000){
        loadArticle();
      }
    })
  }

}

const insertStatus = (id)=>{
  let userId = user.value.userId
  axios.post(BASE_URL+'/v1/forum/insertRecord/'+id + '/' + userId).then((response)=>{
    if (response.data.code==2000){
      console.log()
    }
  })
}


//定义保存搜索条件
const search = ref({
  articleDescription:''
});
let id = ref();
const searchArticle = ()=>{
  let data = qs.stringify(search.value)
  axios.get(BASE_URL + '/v1/forum/search?'+data)
      .then((response)=>{
        if (response.data.code==2000){
          id = response.data.data;
          localStorage.setItem('id',id);
        }
      })
}

// 新增点击访问量
const clickAdd = (id)=>{
  axios.post(BASE_URL+'/v1/forum/clickAdd/'+id).then((response)=>{
    if (response.data.code==2000){
      console.log(response.data.data)
    }
  })
}

//删除文章
const deleteArticle = (id)=>{
  if (confirm('确定要删除吗?')) {
    axios.post(BASE_URL + '/v1/forum/deleteArticle/'+id).then((response) => {
      if (response.data.code == 2000) {
        loadArticle();
        ElMessage.success('删除成功!');
      }
    })
  }
}


</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
.AAA{
  width: 100%;
  height: 100%;
  margin-top: -0.1%;
  min-height: 94vh;
  background-size: 100% 100%;
}
button{
  background: linear-gradient(90deg, rgb(108, 66, 149), rgb(74, 66, 149));/*渐变颜色*/
  margin: 0 auto;
  transition: transform .2s; /* 动画 */
  :deep(.el-button__wrapper) {
    box-shadow: 0 0 5px rgb(108, 66, 149); /* 霓虹边框效果，可以根据需求调整颜色和模糊度 */
    border-radius: 20px; /* 设置圆角半径 */
    cursor: default;
    .el-button__inner {
      cursor: default !important;
    }
  }
}
button:hover{
  background: linear-gradient(45deg, #6c4295, #b78ae3);
  transform: scale(1.2); /* （120% 缩放按钮动态*/
}
.main{
  width: 100%;
  height: 100%;
  margin-top: -0.1%;
  background: url("../../assets/img/user/userCenterBJ.jpg") center;
  min-height: 94vh;
  background-size: 100% 100%;
}
h3{
  margin-top: 10px;
}



</style>
